<template>
  <div class="position_width" :class="{'p_w_bc':info.bColor}">
    <h3>{{info.title}}</h3>
    <div class="right position_location" v-if="positionTitleState">
      <i class="icon iconfont icon-location"></i>
      <br>
      <span>{{city}}</span>
    </div>
    <span>{{info.cue}}</span>
  </div>
</template>

<script>

  export default {
    data: () => ({
      city: JSON.parse(sessionStorage.getItem('city'))
    }),
    props: {
      info: {
        default: () => {}
      },
      positionTitleState: {
        type: Boolean,
        default: true
      },
    },
    activated() {
      this.city = JSON.parse(sessionStorage.getItem('city'))
    },
    activated() {
      this.city = JSON.parse(sessionStorage.getItem('city'))
    },
    async created() {

    },
    mounted() {
      this.$nextTick(async () => {

      })
    },
    methods: {},
    components: {}
  }
</script>

<style lang="scss" scoped="">
  div.position_width {
    width: 100%;
    height: 5.6rem;
    border-top: 1px solid #f5f5f5;
    /*border-bottom: 1px solid #f5f5f5;*/
    padding: 1rem;
    h3 {
      margin-bottom: 0.2rem;
      font-size: 1.35rem;
      color: rgb(51, 51, 51);
    }
    .position_location {
      margin-top: -1.4rem;
      .icon-location {
        color: #848484;
        + br + span {
          color: rgb(153, 153, 153);
          font-size: 0.8rem;
        }
      }
      .icon-location:before {
        margin-left: 0.3rem;
        color: rgb(153, 153, 153);
      }
      text-align: center;
    }
  }

  .p_w_bc {
    background-color: #f5f5f5;
  }

  span {
    color: rgb(153, 153, 153);
    font-size: 0.95rem;
  }

</style>